<template>
    <div>
        <top :title="'光伏组件面积详细计算'" />
        <!-- 光能计算 -->
        <div class="strategy" @click="closePort">
            <div class="top-bar">
                <div class="title">光伏组件面积详细计算：</div>
                <div class="search-box flex-al-center flex-bet">
                    <div class="flex">
                        <div class="s-title">光伏组件占地系数：</div>
                        <div class="input pointer">
                            <input type="text" v-model="coverArea" style="width:310px" placeholder="建议值0.8">
                            <el-popover key="index1" :visible-arrow="false" popper-class="myClass" placement="bottom-end"
                                width="200" trigger="click" content="倾角35度安装时组件之间的距离为2.51m，计算后得到系数为0.39">
                                <img slot="reference" src="@/assets/wenhao.png" alt="">
                            </el-popover>
                        </div>
                        <div class="s-title">光伏组件总面积：</div>
                        <div class="input pointer" @click.stop="openPort">
                            <input type="text" v-model="totalArea" style="width:310px" disabled>
                        </div>
                    </div>


                    <div class="tools flex">
                        <div class="btn" @click="addList">新增</div>
                        <div class="btn" @click="delList">删除</div>
                    </div>
                </div>
            </div>

            <div class="box">
                <el-table :data="dataList" :highlight-current-row="true" row-class-name="rowClass" @row-click="rowClick"
                    cell-class-name="cellClass" max-height="510" border header-row-class-name="headClass" stripe
                    style="background-color: #172C69; border: 2px solid #2D57D2;">
                    <el-table-column type="index" align="center" label="序号" width="193">
                    </el-table-column>
                    <el-table-column prop="length" align="center" label="长度 /m" width="auto">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.length" type="number" key="input1"
                                @input="getDevice(scope.row, scope.$index)" placeholder="请输入长度"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="kuandu" align="center" label="宽度 /m" width="auto">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.kuandu" type="number" key="input1"
                                @input="getDevice(scope.row, scope.$index)" placeholder="请输入长度"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="area" align="center" label="光伏组件面积 /㎡" width="auto">
                    </el-table-column>
                </el-table>
                <div class="tools tools-b flex">
                    <div class="btn" @click="save">保存</div>
                    <div class="btn" @click="goBack">取消</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import top from "@/components/top.vue"
export default {
    components: {
        top
    },
    data() {
        return {
            showPort: false,
            port: "",
            coverArea: 0.39,
            totalArea: "",
            dataInfo: {},
            dataList: [
                {
                    id: 0,
                    length: "",
                    kuandu: "",
                    area: ""
                },
            ],
            portList: ["阳逻港", "青岛港", "天津港", "宁波舟山港"],
        }
    },
    methods: {
        // 新增行
        addList() {
            if (this.dataList.length == 0) {
                this.dataList = [{
                    id: 0,
                    kuandu: null,
                    length: null,
                    area:null
                }]
            } else {
                this.dataList.unshift({
                    id: this.dataList[0].id + 1,
                    kuandu: null,
                    length: null,
                    area:null
                })
            }
        },

        // 删除行
        delList() {
            this.dataList = this.dataList.filter(val => val.id !== this.dataInfo.id)
            console.log(this.dataList)
            this.dataInfo = null
            this.totalArea = (this.dataList.reduce((pre, cur) => {
                return pre += cur.area
            }, 0)).toFixed(2)
        },

        // 输入框回调
        getDevice(row, index) {
            row.area = (row.length * row.kuandu * this.coverArea).toFixed(2)
            this.totalArea = (this.dataList.reduce((pre, cur) => {
                return pre += cur.area*1
            }, 0)).toFixed(2)

        },
        // 点击行
        rowClick(row) {
            console.log(row.id)
            this.dataInfo = row;
        },
        // 保存
        save(){
            this.$store.commit("updateLightArea",this.totalArea)
            // this.$router.go(-1)
            this.$router.push("/home/naturalResEstimate")
        },
        // 返回
        goBack() {
            this.$router.go(-1)
        },
        // 隐藏列表
        closePort() {
            this.showPort = false;
        },
        openPort() {
            this.showPort = !this.showPort;
        },
        getPort(item) {
            this.port = item
        }
    }
}
</script>

<style lang="scss" scoped>
.strategy {
    background-color: #000C38;
    height: 90.7vh;
    box-sizing: border-box;
    overflow: auto;
    padding: 27px;
}

.box {
    background: #172C69;
    border-radius: 5px 5px 5px 5px;
    padding: 32px 35px;
}

.top-bar {
    padding: 27px;
    background: #172C69;
    border-radius: 5px;
    margin-bottom: 27px;

    .title {
        font-size: 27px;
        font-weight: 500;
        color: #FFFFFF;
        margin: 0 0 21px 0;
    }

    .search-box {
        .s-title {
            font-size: 27px;
            color: #E9EBF1;
        }

        .input {
            position: relative;
            border-radius: 5px;
            border: 3px solid #2D57D2;
            padding: 11px 11px 11px 16px;
            margin: 0 37px 0 0;
            border-radius: 5px;

            .result {
                padding: 11px;
                position: absolute;
                z-index: 1000;
                left: -3px;
                right: -3px;
                top: 56px;
                background: #2D57D2;
                box-shadow: 0px 3px 8px 0px rgba(0, 12, 56, 0.75);
                border-radius: 5px 5px 5px 5px;

                .r-li {
                    padding: 3px 11px;
                    margin: 0 0 8px 0;
                    font-size: 21px;
                    border-radius: 5px;

                    &:last-of-type {
                        margin: 0;
                    }

                    &:hover {
                        background: #173CA8;
                    }
                }
            }

            input {
                font-size: 21px;
                color: #FFFFFF;
                background-color: transparent;
            }
        }

        .btn {
            padding: 9.5px 37px 9px;
            background: #2D57D2;
            border-top: 3px solid #2D57D2;
            border-bottom: 3px solid #2D57D2;
            border-radius: 5px;
            font-size: 24px;
            line-height: 28px;
            color: #E9EBF1;
        }

        .border-r {
            border-radius: 5px;

        }
    }

}

.tools-b {
    margin: 20px 0 0 0;
}

.tools {
    justify-content: flex-end;

    .btn {
        padding: 9.5px 47px 9px;
        background: #2D57D2;
        border-top: 3px solid #2D57D2;
        border-bottom: 3px solid #2D57D2;
        border-radius: 5px;
        font-size: 24px;
        line-height: 28px;
        color: #E9EBF1;
        margin-left: 20px;

        &:last-of-type {
            border: 3px solid #2D57D2;
            background: #172C69;
        }
    }
}

.btn {
    cursor: pointer;
}

::v-deep .current-row {
    background: #4b73d1a7 !important;

}

::v-deep .el-input__inner {
    border: none;
    color: #fff;
    font-size: 28px !important;
    background-color: transparent;
}
</style>
  